<template>
  <el-dialog v-if="load" :close-on-click-modal="false" title="1688快速支付" v-model="visible" align-center width="1360px" :z-index="2000" @close="handleClose">
    <div class="flex mb-3">
      <div class="mr-3 flex items-center gap-2">
        支付方式 <VSelect v-model="payment_type"
          :options="(options.payment_type || []).filter(d => d.value !== 5)" class="w-40"/>
      </div>
      <el-button :loading="loadings.check" @click="check">重新校验</el-button>
      <el-button type="primary" :loading="loadings.pay" @click="pay">批量1688付款</el-button>
      <el-button :loading="loadings.batchDelete" @click="batchDelete">删除所有匹配不成功数据</el-button>
    </div>
    <vxe-table ref="tableRef" :data="data" size="small" :max-height="560">
      <vxe-column type="checkbox" width="30"></vxe-column>
      <vxe-column title="校验状态" :min-width="80">
        <template #default="{ row }">
          <el-button link type='primary'>{{ row.check_status_name }}</el-button>
        </template>
      </vxe-column>
      <vxe-column title="校验结果" field="check_message" :min-width="100">
        <template #default="{ row }">
          <div v-for="(d, i) in row.check_message.split(';')" :key="i">{{ d }}</div>
        </template>
      </vxe-column>
      <vxe-column title="付款申请单号" field="payment_no" :min-width="100"></vxe-column>
      <vxe-column title="支付结果" :min-width="140">
        <template #default="{ row }">
          <div v-for="(d, i) in row.pay_message.split(';')" :key="i">{{ d }}</div>
        </template>
      </vxe-column>
      <vxe-column title="支付账号" field="payment_account" :min-width="100"></vxe-column>
      <vxe-column title="供应商" field="supplier_name" :min-width="100"></vxe-column>
      <vxe-column title="交易方式" field="payment_type_name" :min-width="100"></vxe-column>
      <vxe-column title="关联采购单号" field="purchase_no" :min-width="100">
        <template #default="{ row }">
          <div v-for="(d, i) in row.purchase_no" :key="i">{{ d }}</div>
        </template>
      </vxe-column>
      <vxe-column title="平台订单号" field="platform_order_no" :min-width="100">
        <template #default="{ row }">
          <div v-for="(d, i) in row.platform_order_no" :key="i">{{ d }}</div>
        </template>
      </vxe-column>
      <vxe-column title="授权账号" field="purchase_account" :min-width="100"></vxe-column>
      <vxe-column title="付款单金" field="apply_price" :min-width="100"></vxe-column>
      <vxe-column title="平台订单需付款金额" field="platform_total_price" :min-width="100"></vxe-column>
    </vxe-table>
  </el-dialog>
</template>

<script setup>
import api from '../api'
import { ElMessage } from 'element-plus'
const props = defineProps({
  options: { type: Object, default: () => ({}) },
})
const emit = defineEmits(['close', 'success'])

const load = ref(false)
const visible = ref(false)
let loadings = reactive({})

// 表单处理
const tableRef = ref()
const payment_type = ref(1)
const data = ref([])

// 打开弹窗
const open = async () => {
  if (!load.value) {
    load.value = true
    await 1
  }
  payment_type.value = 1
  loadings = reactive({})
  visible.value = true
  payList()
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}

const payList = () => {
  api.payList().then(res => {
    data.value = res.data
  })
}

// 提交
const pay = async () => {
  const selection = tableRef?.value.getCheckboxRecords()
  if (!selection.length) {
    ElMessage.warning('请先选择行')
    return
  }
  const p_ids = selection.map(d => d.p_id)
  loadings.pay = true
  api.onlinePay({ p_ids, payment_type: payment_type.value }).then(res => {
    ElMessage.success('操作成功')
    emit('success')
    close()
  }).finally(() => {
    loadings.pay = false
  })
}

const check = () => {
  const selection = tableRef?.value.getCheckboxRecords()
  if (!selection.length) {
    ElMessage.warning('请先选择行')
    return
  }
  const p_ids = selection.map(d => d.p_id)
  loadings.check = true
  api.check({ p_ids }).then(res => {
    ElMessage.success('操作成功')
    payList()
  }).finally(() => {
    loadings.check = false
  })
}
const batchDelete = () => {
  loadings.batchDelete = true
  api.batchDelete().then(res => {
    ElMessage.success('操作成功')
  }).finally(() => {
    loadings.batchDelete = false
  })
}

defineExpose({ open })
</script>